<html>
<head>
    <title>Tooltip jQuery example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style type="text/css">
        body {padding:100px;}
    </style>
    
    <script> 
    $(document).ready(function() {
        $('#message_container').css('opacity', '0.0');
        $('a.jquery-title-hint').mouseover(function() {
            $('#message_container').text(this.title);       //copy title attribute to div.innerText
            $('#message_container').clearQueue();           //
            $('#message_container').stop();                 // stop all running animation
            $('#message_container').css('opacity', '0.0');
            $('#message_container').fadeTo('fast', 1.0);    //start show
            $('#message_container').css('top',$(this).offset().top - $('#message_container').outerHeight()).css('left',$(this).offset().left+$(this).outerWidth());
            this.title = "";
        });
        $('a.jquery-title-hint').mouseout(function() {
            $('#message_container').delay(300).fadeTo('slow', 0.0); //hide hint after 0.3 second
            this.title =  $('#message_container').text();           //restore a.title attribute
        });
    });
    </script> 
</head>

<body>
    <div id="message_container" style="position:absolute;background-color:#444;color:#ffa;border:1px dotted #aaa;padding:3px;"></div>
    <a class="jquery-title-hint" title="This is a fruit." href="#">Apple</a> and
    <a class="jquery-title-hint" title="This is a vegetable." href="#">Potate</a> are food!
</body>
</html>